import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  Dimensions,
  TouchableWithoutFeedback
} from 'react-native'

import category from '../data/category.json'

class CategoryItem extends Component {
  constructor (props) {
    super(props)
  }
  render() {
    const { category, index } = this.props
    return(
      <View style={styles.categoryItem}>
        <Text style={styles.categoryItemTitle}>{category.title}</Text>
        <Image style={styles.categoryItemImage} resizeMode="cover" source={{uri: category.imageUrl}} />
      </View>
    )
  }
}


export default class Category extends Component {
  constructor(props){
    super(props)
    this.navigateTo = this.navigateTo.bind(this)
  }
  
  navigateTo(routerName, params){
    const { navigation } = this.props
    navigation.navigate(routerName, params)
  }

  navigat

  render () {
    return(
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={() => { this.navigateTo('Search') }}>
          <View style={styles.searchBtnContain}>
            <Text style={styles.searchBtn}>搜索</Text>
          </View>
        </TouchableWithoutFeedback>
        <ScrollView>
          <View style={styles.scrollContainer}>
            <View style={styles.banner}>
              <TouchableWithoutFeedback onPress={() => { this.navigateTo('BooksList', {type: 'reading', moduleId: '1001', entryId: '409', title: '七日在读榜'})}}>
                <View style={styles.bannerImageWrap}>
                  <Image style={styles.bannerImage} resizeMode="center" source={require('../img/banner_read.png')} />
                </View>
              </TouchableWithoutFeedback>
              <View style={styles.bannerImageSpace}></View>
              <TouchableWithoutFeedback onPress={() => { this.navigateTo('BooksList', {type: 'new', moduleId: '1001', entryId: '409', title: '新书上架榜'})}}>
                <View style={styles.bannerImageWrap}>
                  <Image style={styles.bannerImage} resizeMode="center" source={require('../img/banner_new.png')} />
                </View>
              </TouchableWithoutFeedback>
            </View>
            <View style={styles.categoryTitle}>
              <Text style={styles.titleLine}></Text>
              <View style={styles.titleTextWrap}>
                <Text style={styles.titleText}>分  类</Text>
              </View>
            </View>
           <View style={styles.categoryList}>
             {
              category.map((c, i) =>
                  <TouchableWithoutFeedback key={i} onPress={() => { this.navigateTo('BooksList', {moduleId: c.moduleId, entryId: c.entryId, title: c.title})}}>
                  <View>
                    <CategoryItem category={c} index={i} />
                  </View>
                </TouchableWithoutFeedback>
              )
             }
           </View>
         </View>
        </ScrollView>
      </View>
    )
  }
}

const { width } = Dimensions.get('window')
const currentImageWidth = (width - 60 ) / 2
const bannerHeight = currentImageWidth * 331 / 543
const categoryItemWidth = (width - 60 ) / 3
const fontColor = '#b3b3b3'
const styles = StyleSheet.create({
  container: {
    paddingTop: 5,
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center'
  },
  scrollContainer: {
    paddingLeft: 20,
    paddingRight: 20
  },
  searchBtnContain: {
    backgroundColor: '#fff',
    paddingTop: 8,
    paddingBottom: 8,
    paddingLeft: 20,
    paddingRight: 20
  },
  searchBtn: {
    height: 32,
    lineHeight: 32,
    borderRadius: 60,
    textAlign: 'center',
    backgroundColor: '#f5f5f5',
    fontSize: 10
  },
  banner: {
    flexDirection: 'row'
  },
  bannerImageWrap: {
    flex: 1,
    paddingTop: 10,
    paddingBottom: 10
  },
  bannerImage: {
    width: currentImageWidth,
    height: bannerHeight,
    borderRadius: 20
  },
  bannerImageSpace: {
    width: 10
  },
  categoryTitle: {
    position: 'relative',
    height: 20
  },
  titleLine: {
    flex: 1,
    position: 'absolute',
    top: 8,
    width: width,
    height: 1,
    backgroundColor: '#eee',
    zIndex: 1
  },
  titleTextWrap: {
    flex: 1,
    alignItems: 'center',
    zIndex: 2
  },
  titleText: {
    fontSize: 12,
    backgroundColor: '#fff',
    paddingLeft: 5,
    paddingRight: 5,
    color: fontColor
  },
  categoryList: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 10
  },
  categoryItem: {
    position: 'relative',
    width: categoryItemWidth,
    height: categoryItemWidth,
    marginBottom: 10
  },
  categoryItemTitle: {
    position: 'absolute',
    top: 10,
    left: 10,
    fontSize: 12,
    zIndex: 3,
    color: '#fff'
  },
  categoryItemImage: {
    width: categoryItemWidth,
    height: categoryItemWidth,
    borderRadius: 8
  }
})